<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="210px">
        <div class="div">
          <div class="img"><img src="../assets/images/u128.png" alt=""></div>
          <div>非翔教育</div>
        </div>
        <el-row class="tac" style="width: 210px;">
          <el-col :span="12">
            <el-menu class="el-menu-vertical-demo" background-color="#ffffff" text-color="#333333"
              active-text-color="#ffffff" :router="true" :unique-opened='true' :collapse="isCollapse" :default-active="routerPath">
              <el-menu-item index="/home/Homepage">
                <el-icon>
                  <HomeFilled />
                </el-icon>
                <span>首页</span>
              </el-menu-item>
              <el-sub-menu index="1">
                <template #title>
                  <el-icon>
                    <Collection />
                  </el-icon>
                  <span>文章管理</span>
                </template>
                <el-menu-item index="/home/swiperManage">轮播图管理</el-menu-item>
                <el-menu-item index="/home/courseManagement">课程管理</el-menu-item>
                <el-menu-item index="/home/Education">教育头条</el-menu-item>
                <el-menu-item index="/home/ActiveList">活动列表</el-menu-item>
                <el-menu-item index="/home/StarTeacher">明星教师</el-menu-item>
              </el-sub-menu>
              <el-menu-item index="/home/Order-management">
                <el-icon>
                  <List />
                </el-icon>
                <span>订单管理</span>
              </el-menu-item>
              <el-menu-item index="/home/BranchManagement">
                <el-icon>
                  <User />
                </el-icon>
                <span>用户管理</span>
              </el-menu-item>
              <el-menu-item index="/home/MoneyManagement">
                <el-icon>
                  <Wallet />
                </el-icon>
                <span>财务管理</span>
              </el-menu-item>
              <el-sub-menu index="2">
                <template #title>
                  <el-icon>
                    <Setting />
                  </el-icon>
                  <span>设置</span>
                </template>
                <el-menu-item index="/home/modifyData">修改资料</el-menu-item>
                <el-menu-item index="/home/commonSettings">通用设置</el-menu-item>
                <el-menu-item index="/home/aboutUs">关于我们</el-menu-item>
                <el-menu-item index="/home/EmployeeManagement">员工管理</el-menu-item>
                <el-menu-item index="/home/Settings">角色管理</el-menu-item>
                <el-menu-item index="/home/OperationLog">操作日志</el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header class="header">
          <div>
            <div><img src="../assets/images/u76.png" alt=""></div>
            <div>
              <el-avatar :size="30" src="" />
            </div>
            <div>Daisy</div>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { ElAside, ElContainer, ElHeader, ElMain, ElRow, ElCol, ElMenu, ElSubMenu, ElMenuItem, ElIcon, ElAvatar } from 'element-plus'
import { HomeFilled, Collection, List, User, Wallet, Setting } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import {useRouter,useRoute} from 'vue-router'
const route=useRoute();
const routerPath=route.path

</script>
<style lang="less" scoped>
.div {
  height: 60px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;

  div:nth-child(2) {
    font-size: 24px;
    font-weight: 700;
    line-height: 60px;
    color: rgb(145, 55, 243);
    margin-left: 13px;
  }
}

.img {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background: linear-gradient(270deg, rgba(204, 153, 255, 1) 0%, rgba(204, 153, 255, 1) 0%, rgba(145, 55, 243, 1) 100%, rgba(145, 55, 243, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 14px;
    height: 17px;
  }
}

.header {
  background: #9137f3;
  padding: 0;

  div:nth-child(1) {
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: flex-end;

    div:nth-child(1) img {
      width: 20px;
      height: 21px;
      margin-right: 55px;
    }

    div:nth-child(2) {
      margin-right: 15px;
    }

    div:nth-child(3) {
      font-size: 14px;
      color: #ffffff;
      font-weight: 700;
      margin-right: 10px;
    }
  }
}

.el-main {
  background-color: #fcfcfc;
  padding: 0;
}
</style>
<style  lang="less">
.tac {
  .el-col-12 {
    width: 210px;
    max-width: 100%;
    text-align: center;
  }

  .el-menu {
    border-right: 0px;
    width: 210px;
  }

  .el-menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
    font-weight: 400;
    font-size: 14px;
  }

  .el-menu-item.is-active {
    background-color: #9137f3 !important;
    color: #ffffff;
  }

  .el-sub-menu__title {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.el-header {
  position: relative;
  height: 60px;
}

.el-aside {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  bottom: 0;
}

.el-main {
  position: absolute;
  left: 200px;
  right: 0;
  top: 60px;
  bottom: 0;
  overflow-y: scroll;
}
.el-main::-webkit-scrollbar{
    display:none;
  }
</style>